import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
import { Box, Flex, Image, Text, useColorModeValue } from '@chakra-ui/react';
import {
  ReactElement,
  ReactEventHandler,
  ReactNode,
  useCallback,
  useEffect,
  useState,
} from 'react';

import { changeUrl } from '../ParametersModal';
import { Artist, ArtistImage } from './ArtistItem';
// import { FaAngleRight, FaAngleLeft } from 'react-icons/fa';

interface ArtistCarouselProps {
  cards: ArtistImage[];
}

type componentsType = {
  left: ReactNode | ReactElement;
  right: ReactNode | ReactElement;
};
const components = {
  left: ChevronLeftIcon,
  right: ChevronRightIcon,
  // left: FaAngleLeft,
  // right: FaAngleRight,
};
interface arrowIconProps {
  arrow: keyof componentsType;
  onClick: ReactEventHandler;
}
function ArrowIcon({ arrow, onClick }: arrowIconProps) {
  const SpecificStory = components[arrow];
  const textC = useColorModeValue('white', 'gray.400');
  return (
    <SpecificStory
      cursor="pointer"
      pos="absolute"
      top="50px"
      width="20px"
      color={textC}
      _hover={{
        opacity: 0.6,
        bg: 'black',
      }}
      {...{ [arrow]: 0 }}
      fontSize="20px"
      onClick={onClick}
    />
  );
}

export default function ArtistCarousel({
  cards,
  name,
}: ArtistCarouselProps & Artist) {
  const textC = useColorModeValue('gray.700', 'gray.400');

  const [currentSlide, setCurrentSlide] = useState<number>(0);
  const slidesCount = cards.length;

  const prevSlide = useCallback(() => {
    setCurrentSlide((s) => (s === 0 ? slidesCount - 1 : s - 1));
  }, [slidesCount]);

  const nextSlide = useCallback(() => {
    setCurrentSlide((s) => (s === slidesCount - 1 ? 0 : s + 1));
  }, [slidesCount]);

  const carouselStyle = {
    transition: 'all .5s',
    ml: `-${currentSlide * 100}%`,
  };
  const SLIDES_INTERVAL_TIME = 3000;
  const ANIMATION_DIRECTION = 'right';

  useEffect(() => {
    // const prevSlide = () => {
    //   setCurrentSlide((s) => (s === 0 ? slidesCount - 1 : s - 1));
    // };

    // const nextSlide = () => {
    //   setCurrentSlide((s) => (s === slidesCount - 1 ? 0 : s + 1));
    // };

    const automatedSlide = setInterval(() => {
      ANIMATION_DIRECTION.toLowerCase() === 'left' ? prevSlide() : nextSlide();
    }, SLIDES_INTERVAL_TIME);
    return () => clearInterval(automatedSlide);
  }, [slidesCount, prevSlide, nextSlide]);

  return (
    <Flex w="full" pos="relative" overflow="hidden">
      <Flex w="full" {...carouselStyle}>
        {cards.map((slide, sid) => (
          <Box key={`slide-${sid}-${name}`} w="full" boxSize="full" flex="none">
            <Image
              height="120px"
              src={changeUrl(slide.imageSrc)}
              w="100%"
              objectFit="cover"
              borderRadius="base"
            />
            <Text textAlign="center" color={textC} p={1}>
              {slide.imageDesc}
            </Text>
          </Box>
        ))}
      </Flex>
      {slidesCount > 1 && <ArrowIcon arrow="left" onClick={prevSlide} />}
      {slidesCount > 1 && <ArrowIcon arrow="right" onClick={nextSlide} />}
    </Flex>
  );
}
